<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell-group title="品鉴活动记录列表">
        <van-cell
          icon="passed"
          v-for="item in records"
          :key="item.id"
          :title="item.card_name"
          :label="item.retailer_name"
        >
          <template #label>
            <div>{{ item.retailer_name }}</div>
            <div>{{ item.confirm_time }}</div>
          </template>
        </van-cell>
      </van-cell-group>
    </van-list>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import NavBar from "@/components/NavBar";
import { getWxClientSampleRecords } from "@/api/card";

export default {
  name: "ClientSampleRecord",
  components: {
    NavBar,
  },

  data() {
    return {
      title: this.$route.meta.title,
   
      records: [],
      loading: false,
      finished: false,

      listQuery: {
        page: 1,
        page_size: 10,
      },

    };
  },
  mounted() {
  },
  methods: {

    onLoad() {
      this.getSampleRecords();
    },
   
    getSampleRecords() {
      this.loading = true;
      getWxClientSampleRecords(this.listQuery)
        .then((res) => {

          if (res.data.results.length === 0) {
            this.records = []; // 清空数组
            this.finished = true; // 停止加载
          }
          this.listQuery.page = res.data.page;
          this.records.push(...res.data.results);
          this.loading = false;

          if (this.records.length >= res.data.count) {
            this.finished = true; // 结束加载状态
          }
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
          this.$toast("获取数据失败！");
        });
    },

  },
};
</script>

<style  scoped>

.van-field__label {
  color: black;
}
.van-col {
  margin: 5px;
  padding: 0px;
}
</style>